<template>
  <div class="app-main">
    <a-card :bordered="false" style="margin-bottom: 10px">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper" style="position: relative">
        <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
          <a-row>
            <a-col :span="7">
              <a-form-model-item label="封堵反馈单号">
                <a-input v-model="pageFilter.pluggingNumber" placeholder="请输入" />
              </a-form-model-item>
            </a-col>
            <a-col :span="7">
              <a-form-model-item label="反馈类型">
                <a-select v-model="pageFilter.feedbackType" allowClear placeholder="请选择" style="width:100%;">
                  <a-select-option v-for="(item, key) in zqArr" :key="key" :value="item.value">{{ item.title }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="7">
              <a-form-model-item label="反馈推送时间">
                <a-range-picker v-model="rvTime" allowClear style="width:100%;" format="YYYY-MM-DD"
                  valueFormat="YYYY-MM-DD" @change="onTimeChange" />
              </a-form-model-item>
            </a-col>
            <a-col :span="3">
              <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
                <a-button type="primary" @click="onQuery"> 查询 </a-button>
                <a-button style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
    </a-card>
    <a-card :bordered="false">
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button type="primary" @click="onSend(1)">新增</a-button>
      </div>
      <!-- 表格展示 -->
      <div class="table-page-content">
        <z-table ref="table" rowKey="key" :showAlert="false" :showSelection="false" :loading="loading" :columns="columns"
          :dataSource="pageData" @change="onTableChange">
          <template slot="feedbackStatus" slot-scope="text">
            <span v-if="text == 0">未反馈</span>
            <span v-if="text == 1">反馈成功</span>
            <span v-if="text == 2">反馈失败</span>
          </template>
          <template slot="feedbackType" slot-scope="text">
            <span v-if="text == 1">人工反馈 </span>
            <span v-if="text == 2">自动反馈</span>
          </template>
          <template slot="action" slot-scope="text,record">
            <template v-if="record.feedbackStatus == 0">
              <a style="color:#108EE9" @click="onEdit(record)">编辑</a>
              <a-divider type="vertical" />
            </template>
            <template v-if="record.feedbackStatus == 0 || record.feedbackStatus == 2">
              <a style="color:#108EE9" @click="onSend(2, record)">推送</a>
              <a-divider v-if="record.feedbackStatus != 0" type="vertical" />
            </template>
            <a v-if="record.feedbackStatus == 1 || record.feedbackStatus == 2" style="color:#108EE9"
              @click="onDetail(record)">详情</a>
          </template>
        </z-table>
      </div>
    </a-card>
  </div>
</template>

<script>
import { jf_fb_list, jf_fb_pushAddFeedback } from '@/api/plugging/authority/jf.js'
export default {
  components: {
  },
  data() {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 17 },
      loading: false,
      visible: false,
      reloading: false,
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      zqArr: [
        { title: "全部", value: '', },
        { title: "人工反馈", value: 1, },
        { title: "自动反馈", value: 2, },
      ],
      statusArr: [
        { title: "启用", value: 0, },
        { title: "禁用", value: 1, },
      ],
      rvTime: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) => {
            return `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
          }
        },
        {
          title: '封堵反馈单号',
          dataIndex: 'pluggingNumber',
          width: 110,
          align: 'center',
        },
        {
          title: '反馈类型',
          dataIndex: 'feedbackType',
          width: 120,
          align: 'center',
          scopedSlots: { customRender: 'feedbackType' },
        },
        {
          title: '反馈推送时间',
          dataIndex: 'feedbackPushTime',
          width: 120,
          align: 'center',
        },
        {
          title: '反馈数量',
          dataIndex: 'feedbackQuantity',
          width: 100,
          align: 'center',
        },
        {
          title: '反馈状态',
          dataIndex: 'feedbackStatus',
          width: 120,
          align: 'center',
          scopedSlots: { customRender: 'feedbackStatus' },
        },
        {
          title: '操作',
          width: 100,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageData: {},
    }
  },
  mounted() {
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.pageFilter = {
        pageNo: 1,
        pageSize: 10,
      }
      this.rvTime = []
      this.refreshTable()
    },
    onTimeChange(date) {
      this.$set(this.pageFilter, 'startTime', date[0])
      this.$set(this.pageFilter, 'endTime', date[1])
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      this.loading = true
      jf_fb_list(this.pageFilter).then((res) => {
        if (res.success) {
          this.pageData = res.result ? res.result : {}
          this.loading = false
        } else {
          this.$message.success(res.message)
          this.loading = false
        }
      })
        .catch((e) => {
          this.loading = false
          this.$message.warning(res.message)
        })
    },
    onSend(type, record) {
      if (type == 1) { //手工反馈
        this.$router.push({
          path: "/authority/jf_feedback/add",
          query: {
            flag: 1
          }
        })
      } else { //列表数据直接推送
        let that = this;
        this.$confirm({
          title: `你确定要推送该数据吗？`,
          okText: "确认",
          okType: "danger",
          cancelText: "取消",
          onOk() {
            let params = {
              id: record.id,
              batchList: record.batchNumber.split(','),
              pluggingNumber: record.pluggingNumber,
              feedbackStartTime: record.feedbackStartTime,
              feedbackEndTime: record.feedbackEndTime,
            }
            jf_fb_pushAddFeedback(params).then((res) => {
              if (res.success) {
                that.onQuery()
                that.$message.success(res.message)
              } else {
                that.$message.warning(res.message)
              }
            })
              .catch((e) => {
                that.$message.warning(res.message)
              })
          }
        })
      }
    },
    onEdit(record) {
      this.$router.push({
        path: "/authority/jf_feedback/edit",
        query: {
          flag: 1,
          id: record.id,
          pluggingNumber: record.pluggingNumber,
          feedbackStartTime: record.feedbackStartTime,
          feedbackEndTime: record.feedbackEndTime
        }
      })
    },
    onDetail(record) {
      this.$router.push({
        path: "/authority/jf_feedback/detail",
        query: {
          flag: 2,
          id: record.id,
          pluggingNumber: record.pluggingNumber,
          feedbackStartTime: record.feedbackStartTime,
          feedbackEndTime: record.feedbackEndTime
        }
      })
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = true
      this.$nextTick(() => (this.reloading = false))
    },
  },
}
</script>
<style lang="less" scoped>
.btnBox {
  position: absolute;
  left: 30%;
  top: 0;
  z-index: 120;
}

/deep/.ant-card-body {
  padding: 15px 24px;
}

/deep/.ant-row {
  margin-bottom: 0
}

/deep/.ant-col-2 {
  width: 5.8% !important;
}
</style>
